import React from 'react';
import {
  Box,
  Avatar,
  Button,
  Image,
  Pressable,
  Text,
  Input,
  Menu,
  useToast,
} from 'native-base';
import {ScrollView, Keyboard, RefreshControl} from 'react-native';
import Like_SVG from '../public/icons/like';
import Arrow_SVG from '../public/icons/arrow';
import Others_SVG from '../public/icons/others';
const PaperDetail = props => {
  //data
  let inputInfo = '';
  const params = props.route.params.item;
  const [comments, setComments] = React.useState([
    {
      userName: '张三',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      star: false,
      starNum: 0,
      content: '关于举办“乒乒乓乓”活动的通知',
      media: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      comments: [
        {
          userName: '张三',
          to: '李四',
          content: '阿弥诺斯',
        },
        {
          userName: '张三',
          to: '李四',
          content: '阿弥诺斯',
        },
        {
          userName: '张三',
          to: '李四',
          content: '阿弥诺诺诺斯',
        },
      ],
    },
    {
      userName: '张三',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      star: false,
      starNum: 0,
      content: '关于举办“乒乒乓乓”活动的通知',
      media: null,
      comments: [
        {
          userName: '张三',
          to: '李四',
          content: '阿弥诺斯',
        },
      ],
    },
    {
      userName: '张三',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      star: false,
      starNum: 0,
      content: '关于举办“乒乒乓乓”活动的通知',
      media: null,
      comments: [
        {
          userName: '张三',
          content: '阿弥诺斯',
        },
      ],
    },
    {
      userName: '张三',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      star: false,
      starNum: 0,
      content: '关于举办“乒乒乓乓”活动的通知',
      media: null,
      comments: [
        {
          userName: '张三',
          content: '阿弥诺斯',
        },
      ],
    },
  ]);
  let currentTarget = params.userName;
  let inputRef = React.useRef(null);
  const [inputPadding, setInputPadding] = React.useState(-50);
  const toast = useToast();
  const [refreshing, setRefreshing] = React.useState(false);
  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    console.log(1);
    // fetch().then(() => setRefreshing(false))
  }, []);
  //method
  React.useEffect(() => {
    const keyboardUpListener = Keyboard.addListener('keyboardDidShow', () => {
      setInputPadding(Keyboard.metrics('keyboardDidShow').height - 50);
    });
    const keyboardDownListener = Keyboard.addListener('keyboardDidHide', () => {
      setInputPadding(-50);
    });
    return () => {
      keyboardUpListener.remove();
      keyboardDownListener.remove();
    };
  });

  //render
  return (
    <Box style={{backgroundColor: '#fff'}}>
      <Box
        style={{
          height: 50,
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <Pressable
          onPress={() => {
            props.navigation.goBack();
          }}>
          <Arrow_SVG></Arrow_SVG>
        </Pressable>

        <Box
          style={{
            backgroundColor: '#f3f3f3',
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            borderRadius: 18,
            padding: 3,
          }}>
          <Avatar
            source={{uri: params.avatar}}
            size={4}
            style={{marginLeft: 5}}></Avatar>
          <Text style={{marginLeft: 3, marginRight: 5}}>
            {params.usergroupName}
          </Text>
        </Box>
        <Menu
          trigger={triggerProps => {
            return (
              <Pressable
                accessibilityLabel="More options menu"
                {...triggerProps}>
                <Others_SVG></Others_SVG>
              </Pressable>
            );
          }}>
          <Menu.Item
            onPress={() => {
              toast.show({
                description: '已收到反馈',
              });
              // fetch
            }}>
            举报
          </Menu.Item>
        </Menu>
      </Box>

      <ScrollView
        style={{backgroundColor: '#f3f3f3', height: 620}}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }>
        <Box
          style={{
            backgroundColor: '#fff',
            marginBottom: 10,
            padding: 10,
          }}>
          <Box
            style={{
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              padding: 10,
            }}>
            <Box style={{display: 'flex', flexDirection: 'row'}}>
              <Avatar source={{uri: params.avatar}} size={10}></Avatar>
              <Box style={{marginLeft: 5}}>
                <Text fontSize={18}>{params.userName}</Text>
                <Text fontSize={10}>{params.date}</Text>
              </Box>
            </Box>
            <Button
              variant={'subtle'}
              colorScheme={'red'}
              style={{borderRadius: 20}}>
              +关注
            </Button>
          </Box>

          <Text fontSize={20}>{params.title}</Text>
          <Text style={{marginBottom: 10, marginTop: 10}}>
            {params.content}
          </Text>
          {params.media && (
            <Image
              source={{uri: params.media}}
              style={{width: '100%', height: 200, borderRadius: 10}}></Image>
          )}
        </Box>

        {comments.map((item, index) => {
          return (
            <Box
              key={index}
              style={{
                backgroundColor: '#fff',
                marginLeft: 10,
                marginRight: 10,
                marginBottom: 10,
                borderRadius: 10,
                padding: 10,
              }}>
              <Pressable
                onPress={() => {
                  console.log(1);
                }}>
                <Box
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexDirection: 'row',
                  }}>
                  <Box
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'center',
                    }}>
                    <Avatar source={{uri: item.avatar}} size={10}></Avatar>
                    <Text style={{marginLeft: 5}} fontSize={18}>
                      {item.userName}
                    </Text>
                  </Box>
                  <Pressable
                    onPress={() => {
                      const newPapers = comments.map((p, i) => {
                        if (i === index) {
                          let q = JSON.stringify(p);
                          q = JSON.parse(q);
                          q.star = !q.star;
                          q.star ? q.starNum++ : q.starNum--;
                          return q;
                        } else {
                          return p;
                        }
                      });
                      setComments(newPapers);
                    }}
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'center',
                    }}>
                    <Like_SVG liked={item.star}></Like_SVG>
                    <Text style={{marginLeft: 5}}>{item.starNum}</Text>
                  </Pressable>
                </Box>

                <Text style={{marginBottom: 10, marginTop: 10}}>
                  {item.content}
                </Text>
              </Pressable>

              <Box
                style={{
                  backgroundColor: '#f3f3f3',
                  borderRadius: 5,
                  paddingLeft: 10,
                  paddingRight: 10,
                  marginLeft: 5,
                  marginRight: 5,
                }}>
                {item.comments.map((item, index) => {
                  return (
                    <Pressable onPress={()=>{console.log(item.userName),inputRef.current.focus()}}>
                      <Text key={index}>
                        {item.userName}:{item.content}
                      </Text>
                    </Pressable>
                  );
                })}
              </Box>
            </Box>
          );
        })}
      </ScrollView>

      <Box
        bottom={inputPadding}
        style={{
          height: 50,
          backgroundColor: '#fff',
          width: '100%',
          position: 'absolute',
          zIndex: 100,
          display: 'flex',
          flexDirection: 'row',
          paddingBottom: 5,
          paddingTop: 5,
        }}>
        <Input
          ref={inputRef}
          onChange={e => {
            inputInfo = e.nativeEvent.text;
          }}
          style={{height: '100%', backgroundColor: 'white'}}
          w="80%"
          colorScheme={'red'}
          variant="rounded"></Input>
        <Button
          colorScheme={'red'}
          onPress={() => {
            console.log(inputInfo);
            inputRef.current.clear();
            inputRef.current.blur();
            //fetch
          }}
          flex={2}
          style={{
            borderRadius: 20,
            position: 'absolute',
            right: 0,
            top: 5,
            width: 150,
            zIndex: -1,
            height: 40,
            paddingLeft: 80,
          }}>
          回复
        </Button>
      </Box>
    </Box>
  );
};
export default PaperDetail;
